<template>
  <div class="hello">
    <Layout>
      <Header class="header"
              :style="{background: '#17233d', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">今日头条后台管理</Header>
      <Layout>
        <!-- <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}"> -->
          <Sider :style="{height: '100vh', left: 0, overflow: 'auto'}">
          <Menu active-name="2-1"
                @on-select="handleOnSelect"
                theme="dark"
                width="auto"
                v-model="selectValue"
                :open-names="['1','2','3']">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-keypad"></Icon>
                文章管理
              </template>
              <MenuItem name="1-1" to="/editor">文章发布</MenuItem>
              <MenuItem name="1-2" to="/manage">文章管理</MenuItem>
              <!-- <MenuItem name="2-3" to="/error">栏目管理</MenuItem>
              <MenuItem name="2-4" to="/error">课表设置</MenuItem> -->
              <!-- <MenuItem name="2-5" to="/teacher/editor">教师风采</MenuItem> 并没有开发  -->
            </Submenu>
            <Submenu name="2" v-show="isAdmin">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                我的收藏
              </template>
              <MenuItem name="2-2" to="/collect">收藏列表</MenuItem>
            </Submenu>
            <Submenu name="3" v-show="isAdmin">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                我的评论
              </template>
              <MenuItem name="3-1" to="/comment">评论列表</MenuItem>
            </Submenu>
            <Submenu name="4" v-show="isAdmin">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                我的点赞
              </template>
              <MenuItem name="4-1" to="/like">点赞列表</MenuItem>
            </Submenu>
            <Submenu name="5" v-show="isAdmin">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                浏览历史
              </template>
              <MenuItem name="5-1" to="/history">浏览历史</MenuItem>
            </Submenu>
            <Submenu name="6">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                个人设置
              </template>
              <MenuItem name="6-1" to="/personinfo">修改个人信息</MenuItem>
              <!-- <MenuItem name="6-2" to="/password">修改密码</MenuItem> -->
            </Submenu>
            <Submenu name="7">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                APP预览
              </template>
              <MenuItem name="7-1" to="/review">预览APP</MenuItem>
            </Submenu>
            
          </Menu>
        </Sider>
        <div class="content_div" :style="{marginLeft: '60px'}">
          <Content  class="content">
            <router-view/>
            
          </Content>
        </div>

      </Layout>
      <Footer>@今日头条开发</Footer>
    </Layout>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      selectValue: "",
      isAdmin: true
    };
  },
  methods:{
    handleOnSelect(){
      window.scrollTo(0, 0);
    }
  },
  mounted(){
    // this.isAdmin = this.$store.getters.getUser.isAdmin;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  color: #fff;
  font-size: 30px;
  text-align: left;
}
.content_div{
  margin-left: 20%;
  position: relative;
  z-index: auto;
  width: 100%;
}
.content{
  width: 98%;
  margin: 20px;
  min-height: 860px;
  background-color: #fff
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
